<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xFio - {{.title}}</title>
    <link href="/static/vendor/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    <link href="/static/vendor/fontawesome/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="sidebar">
        <div class="sidebar-header">
            <h3><span class="brand-icon" aria-hidden="true">
                <svg viewBox="0 0 24 24" role="img" focusable="false" class="xfio-logo-svg">
                    <circle cx="12" cy="12" r="11" class="disk" />
                    <path d="M13.5 2L6 14h5.2L10.5 22 18 10h-5.2L13.5 2z" class="bolt" />
                </svg>
            </span><span class="brand-word">x<span class="brand-f">F</span>io</span></h3>
            <p>分布式fio性能测试控制中心</p>
        </div>
        <div class="sidebar-nav">
            <nav class="nav flex-column">
                <a class="nav-link" href="/"><i class="fas fa-home"></i> 首页</a>
                <a class="nav-link" href="/workers"><i class="fas fa-server"></i> 节点管理</a>
                <a class="nav-link" href="/test-cases"><i class="fas fa-file-code"></i> 测试用例</a>
                <a class="nav-link active" href="/tasks"><i class="fas fa-tasks"></i> 任务管理</a>
                <a class="nav-link" href="/results"><i class="fas fa-chart-bar"></i> 结果分析</a>
            </nav>
        </div>
    </div>

    <div class="main-content">
        <div class="page-header">
            <h2><i class="fas fa-database me-2"></i> {{.title}}</h2>
        </div>

        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card text-center bg-primary text-white">
                    <div class="card-body">
                        <h5 id="totalTasks">0</h5>
                        <p class="mb-0">总任务数</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-success text-white">
                    <div class="card-body">
                        <h5 id="pendingTasks">0</h5>
                        <p class="mb-0">待处理</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-warning text-white">
                    <div class="card-body">
                        <h5 id="runningTasks">0</h5>
                        <p class="mb-0">运行中</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card text-center bg-info text-white">
                    <div class="card-body">
                        <h5 id="completedTasks">0</h5>
                        <p class="mb-0">已完成</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex justify-content-end mb-2">
            <div class="d-flex gap-2">
                <button class="btn btn-outline-danger btn-sm" id="batchDeleteBtn" title="批量删除选中任务" disabled>
                    <i class="fas fa-trash me-1"></i> 批量删除
                </button>
                <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#createTaskModal">
                    <i class="fas fa-plus me-1"></i> 创建任务
                </button>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover" id="tasksTable">
                        <thead class="table-dark">
                            <tr>
                                <th><input type="checkbox" id="selectAll" title="全选"></th>
                                <th>任务名称</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>开始时间</th>
                                <th>结束时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 任务数据将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建任务模态框：四步向导 -->
    <div class="modal fade modal-wizard" id="createTaskModal" tabindex="-1">
        <div class="modal-dialog modal-xxl">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title"><i class="fas fa-tasks me-2"></i>创建任务</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="wizard-steps mb-3">
                        <div class="progress" style="height:8px;">
                            <div id="wizardProgress" class="progress-bar" role="progressbar" style="width:25%"></div>
                        </div>
                        <div id="wizardProgressLabel" class="small text-muted mt-2">进度: 步骤 1 / 4 — 已选用例 0</div>
                        <div class="d-flex justify-content-between mt-2">
                            <small id="stepLabel1" class="text-muted">1. 基本信息 <span class="step-check" aria-hidden="true"></span></small>
                            <small id="stepLabel2" class="text-muted">2. 选择用例 <span class="step-check" aria-hidden="true"></span></small>
                            <small id="stepLabel3" class="text-muted">3. 选择并配置 Worker <span class="step-check" aria-hidden="true"></span></small>
                            <small id="stepLabel4" class="text-muted">4. 用例编排 <span class="step-check" aria-hidden="true"></span></small>
                            <small id="stepLabel5" class="text-muted">5. 预览 & 提交 <span class="step-check" aria-hidden="true"></span></small>
                        </div>
                        
                    </div>

                    <form id="createTaskForm">
                        <!-- 无障碍播报区域（隐藏） -->
                        <div id="ariaStatus" class="visually-hidden" aria-live="polite" aria-atomic="true"></div>
                        <!-- Step 1: 填写任务基本信息 -->
                        <div class="wizard-step" id="wizardStep1">
                            <div class="mb-3">
                                <label for="taskNameInput" class="form-label fw-semibold">任务名称 <span class="text-danger">*</span></label>
                                <input type="text" id="taskNameInput" class="form-control" placeholder="为任务输入一个描述性名称..." maxlength="255" required>
                                <div class="form-text">任务名称将帮助您识别和管理任务</div>
                            </div>
                            <div class="mb-3">
                                <label for="taskDescInput" class="form-label fw-semibold">任务描述</label>
                                <textarea id="taskDescInput" class="form-control" rows="2" placeholder="可选：为任务添加详细描述以便日后识别"></textarea>
                            </div>
                        </div>

                        <!-- Step 2: 选择测试用例 -->
                        <div class="wizard-step d-none" id="wizardStep2">
                            <div class="mb-3">
                                <div class="input-group mb-2">
                                    <input id="testCaseSearch" class="form-control" placeholder="输入名称/关键字 模糊搜索测试用例..." aria-label="搜索测试用例" aria-controls="testCaseSelect">
                                    <button class="btn btn-outline-secondary" type="button" id="testCaseSearchBtn" title="搜索 (支持模糊/多关键字)">搜索</button>
                                </div>

                                <!-- 筛选：下拉展示当前可用的值（由 JS 动态填充） -->
                                <div id="testCaseFilters" class="mb-3">
                                    <div class="row g-2 align-items-center">
                                        <div class="col-auto">
                                            <label class="form-label small mb-1">IO 模式</label>
                                            <select id="filterRw" class="form-select form-select-sm">
                                                <option value="all">全部</option>
                                            </select>
                                        </div>
                                        <div class="col-auto">
                                            <label class="form-label small mb-1">Block Size</label>
                                            <select id="filterBs" class="form-select form-select-sm">
                                                <option value="all">全部</option>
                                            </select>
                                        </div>
                                        <div class="col-auto">
                                            <label class="form-label small mb-1">IO Depth</label>
                                            <select id="filterIodepth" class="form-select form-select-sm">
                                                <option value="all">全部</option>
                                            </select>
                                        </div>
                                        <div class="col-auto">
                                            <label class="form-label small mb-1">Num Jobs</label>
                                            <select id="filterNumjobs" class="form-select form-select-sm">
                                                <option value="all">全部</option>
                                            </select>
                                        </div>
                                        <div class="col-auto ms-auto">
                                            <button type="button" id="clearTestCaseFilters" class="btn btn-sm btn-outline-danger">清除筛选</button>
                                        </div>
                                    </div>
                                </div>

                                <!-- 隐藏的 form 字段以兼容现有 JS/提交逻辑（用于实际表单提交） -->
                                <input type="hidden" id="testCaseSelect" name="test_case_id" value="">

                                <!-- 卡片化的用例列表（JS 将填充此容器） -->
                                <div id="testCaseList" class="testcase-grid" aria-label="测试用例列表" role="list"></div>

                            </div>
                            <div id="fioCmdWrapper" class="position-relative d-none">
                                <button type="button" id="copyFioCmdBtn" class="btn btn-sm btn-outline-light position-absolute" style="top:6px; right:6px; z-index:2;" title="复制命令" aria-label="复制命令">复制</button>
                                <pre id="fioCmdPreview" class="border rounded p-2 bg-dark text-light mono mb-0 fio-preview-expanded" style="overflow:auto; font-size:0.85rem; padding-top:2.2rem;" aria-label="fio命令行预览"></pre>
                            </div>
                        </div>

                        <!-- Step 3: 选择并配置 Worker -->
                        <div class="wizard-step d-none" id="wizardStep3">
                            <div class="mb-3">
                                <!-- Worker 搜索区域：与测试用例搜索风格对齐 -->
                                <div class="input-group mb-2">
                                    <input id="workerSearch" class="form-control" placeholder="输入名称/IP/状态 进行模糊搜索节点..." aria-label="搜索 Worker" aria-controls="workerSelectionArea">
                                    <button class="btn btn-outline-secondary" type="button" id="workerSearchBtn" title="搜索 (支持模糊匹配)">搜索</button>
                                </div>

                                <label class="form-label fw-semibold mb-1">选择Worker节点 <span class="text-danger">*</span></label>
                                <div id="workerSelectionArea">
                                    <div class="text-muted small">正在加载 Worker 列表...</div>
                                </div>
                            </div>

                            <div class="mt-3" id="workerConfigPanel">
                                <h6 class="mb-2">节点测试路径配置</h6>
                                <div class="global-worker-config mb-2 p-2 border rounded" id="globalWorkerConfig">
                                    <label class="form-label mb-1 small text-muted">全局测试路径</label>
                                    <div class="d-flex gap-2 align-items-start">
                                        <input type="text" id="globalTestPathInput" class="form-control form-control-sm" placeholder="例如 /mnt/data/fio-test.img 或 /dev/nvme0n1" aria-label="全局测试路径">
                                        <div class="d-flex gap-2">
                                            <!-- 实时更新，无需手动应用按钮 -->
                                        </div>
                                    </div>
                                    <div class="form-text" id="globalPathHint">填写一个路径即可，多节点共享；如需差异，点击某节点“编辑路径”。</div>
                                </div>
                                <div class="overrides-wrapper d-none" id="workerOverridesWrapper">
                                    <div class="d-flex justify-content-between align-items-center mb-1">
                                        <small class="text-muted">路径编辑 (<span id="overrideCount">0</span>)</small>
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-sm btn-outline-secondary" id="collapseOverridesBtn">折叠</button>
                                            <!-- 已移除：清除全部按钮 -->
                                        </div>
                                    </div>
                                    <div id="workerOverridesList" class="overrides-list small"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 4: 用例编排 -->
                        <div class="wizard-step d-none" id="wizardStep4">
                            <h6></h6>

                            <!-- 面板：当多选用例时显示，允许排序与选择执行模式 -->
                            <div id="executionPlanPanel" class="card mt-3 d-none">
                                <div class="card-body p-2">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <strong>已选用例顺序与执行策略</strong>
                                        <small class="text-muted">提示：变更用例执行顺序和开始时间</small>
                                    </div>
                                    <div id="executionPlanList" class="plan-list small mb-2"></div>
                                    <div class="form-text text-muted"><i class="fas fa-info-circle me-1" aria-hidden="true"></i>最长支持9999秒延迟启动</div>
                                </div>
                            </div>
                        </div>

                        <!-- Step 5: 预览与提交 -->
                        <div class="wizard-step d-none" id="wizardStep5">
                            <h6></h6>
                            <div id="assignmentPreview" class="mt-2">
                                <!-- 预览内容由 JS 生成 -->
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer bg-light">
                    <div class="w-100 d-flex justify-content-between">
                        <div>
                            <button type="button" class="btn btn-outline-secondary" id="wizardBackBtn" disabled>
                                <i class="fas fa-arrow-left me-1"></i> 上一步
                            </button>
                        </div>
                        <div>
                            <button type="button" class="btn btn-secondary me-2" id="wizardCancelBtn" data-bs-dismiss="modal">取消</button>
                            <!-- 已移除：清除所有覆盖按钮 -->
                            <button type="button" class="btn btn-primary" id="wizardNextBtn">下一步 <i class="fas fa-arrow-right ms-1"></i></button>
                            <button type="button" class="btn btn-success d-none" id="submitTaskBtn"><i class="fas fa-paper-plane me-1"></i>创建任务</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 查看任务详情模态框 -->
    <div class="modal fade" id="viewTaskModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header bg-info text-white">
                    <h5 class="modal-title"><i class="fas fa-info-circle me-2"></i>任务详情</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>任务信息</h6>
                            <table class="table table-sm">
                                <tr><td>任务ID</td><td id="taskDetailId">N/A</td></tr>
                                <tr><td>任务名称</td><td id="taskDetailName">N/A</td></tr>
                                <tr><td>测试用例ID</td><td id="taskDetailTestCaseId">N/A</td></tr>
                                <tr><td>节点 ID</td><td id="taskDetailWorkerId">N/A</td></tr>
                                <tr><td>状态</td><td id="taskDetailStatus">N/A</td></tr>
                                <tr><td>创建时间</td><td id="taskDetailCreatedAt">N/A</td></tr>
                                <tr><td>开始时间</td><td id="taskDetailStartTime">N/A</td></tr>
                                <tr><td>结束时间</td><td id="taskDetailEndTime">N/A</td></tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <h6>任务配置覆盖</h6>
                            <pre class="bg-light p-2 rounded" id="taskDetailConfigOverride">无配置覆盖</pre>
                        </div>
                    </div>
                    <div class="mt-3" id="taskDetailResultSection" style="display: none;">
                        <h6>执行结果</h6>
                        <pre class="bg-light p-2 rounded" id="taskDetailResult">暂无结果数据</pre>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer bg-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">&copy; 2025 xfio - 分布式fio性能测试系统</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="/static/vendor/bootstrap.bundle.min.js"></script>
    <script src="/static/js/tasks.js?v={{.assetVersion}}"></script>
</body>
</html>